<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style rel="stylesheet">
        .redClass{
            color: red;
        }
    </style>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <td>名称</td>
                    <td>数量</td>
                    <td>价格</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(b,index) in books">
                    <td>{{b.name}}</td>
                    <td>
                        <button @click="decrease(index)" :disabled="b.num<=1">-</button>
                        <input v-model="b.num" style="width: 30px;text-align: center">
                        <button @click="increase(index)">+</button>
                        </td>
                    <td>{{b.price}}</td>
                    <td>
                        <button class="btn-danger" @click="del(index)">删除</button>
                    </td>
                </tr>
            </tbody>

        </table>
        <h1>
            <em :class="{'redClass':f}">￥ {{totalPrice}} 元</em>
        </h1>


    </div>


    <script>
       // document.getElementById("app").innerHtml="";

        //1,构建Vue实例
        var app =  new Vue({
            el:"#app",//容器的id
            data:{ //定义数据
                f:true,
                books:[{"id":1,"name":"java入门",author:"张三",num:1,price:100},
                    {"id":2,"name":"java入门2",author:"li",num:1,price:110},
                    {"id":3,"name":"java入门3",author:"张三",num:1,price:120}]
            },
            methods:{//函数
                decrease(index){
                    for(var i = 0;i<this.books.length;i++){
                        if(i==index){
                            this.books[i].num--;
                        }
                    }
                },
                increase(index){
                    for(var i = 0;i<this.books.length;i++){
                        if(i==index){
                            this.books[i].num++;
                        }
                    }
                },
                del(index){

                    // Removes elements from an array and
                    //根据下标移除元素
                    this.books.splice(index,1);

                }

            },
            computed:{//计算属性
                totalPrice(){
                    var  total = 0;
                    for(var i = 0;i<this.books.length;i++){
                        total+=this.books[i].num*this.books[i].price;
                    }

                    return total;
                }
            }

        });

    </script>

</body>
</html>